<script setup>
import { ref } from 'vue';

// 控制对话框的显示与隐藏
const isVisible = defineModel()

// 打开对话框的方法
const openDialog = () => {
  isVisible.value = true;
};

// 关闭对话框的方法
const closeDialog = () => {
  isVisible.value = false;
};
</script>

<template>
  <teleport to="body">
    <transition name="fade">
      <div v-if="isVisible" class="container h-screen w-screen bg-slate-600 bg-opacity-50 fixed top-0 left-0 flex justify-center items-center">
        <div class="content bg-white p-8 rounded shadow-md relative">
          <!-- 关闭按钮 -->
          <button @click="closeDialog" class="absolute top-2 right-2">X</button>
          <!-- 自定义内容插槽 -->
          <slot>默认对话框内容</slot>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
